<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="set">设置cookie</button>
    <button class="get">获取cookie</button>
</body>
<script>

    // 如何存储cookie?  (对应键名存储,没有就新增,有就修改)
    // (1) cookie的存/取 都依赖于document.cookie
    // (2) cookie也是以键值对形式存在的字符串(key=value)
    // (3) cookie存储时, 是一条一条存储的, 取的时候是将所有cookie整合到一整个字符串中返回
    // (4) cookie可以设置过期时间,和存储路径

    // 如何获取cookie
    // (1) cookie的存/取 都依赖于document.cookie
    // (2) cookie也是以键值对形式存在的字符串(key=value)
    // (3) cookie存储时, 是一条一条存储的, 取的时候是将所有cookie整合到一整个字符串中返回,每条数据之间用"; "分隔
    // (4) cookie可以设置过期时间,和存储路径


    var setBtn = document.getElementsByClassName("set")[0];
    var getBtn = document.getElementsByClassName("get")[0];



    setBtn.onclick = function () {
        console.log("存储cookie");


        // var date = new Date();
        // date.setDate(date.getDate() + 7);  // 7天后过期


        // //  7天后过期  cookie存储在站点根目录下 /
        // document.cookie = "user=a123123; expires=" + date.toUTCString() + "; path=/";
        // document.cookie = "pwd=123123; expires=" + date.toUTCString() + "; path=/";
        // document.cookie = "phone=17386141517;expires=" + date.toUTCString() + "; path=/";
        // document.cookie = "email=123123@qq.com; expires=" + date.toUTCString() + "; path=/";

        setCookie("user", "a123123", 7 * 24 * 60 * 60);
        setCookie("pwd", "123123", 30 * 60);
        setCookie("email", "123123@qq.com", 365 * 24 * 60 * 60);
        setCookie("phone", "17386141517");
    }

    getBtn.onclick = function () {
        console.log(getCookie("user"));
        console.log(getCookie("pwd"));
        console.log(getCookie("phone"));
        console.log(getCookie("email"));
    }


    // cookie封装
    // setCookie(key,val,expires,path="/")  设置cookie
    // expires 不传参,浏览器关闭过期
    //          传参, 指定时间后过期  (单位: day  s)

    function setCookie(key, val, expires, path = "/") {
        if (expires == undefined) { // 不传参
            document.cookie = key + "=" + val + "; path=" + path;
        } else {
            var date = new Date();
            date.setSeconds(date.getSeconds() + expires);  // 7天后过期
            //  7天后过期  cookie存储在站点根目录下 /
            document.cookie = key + "=" + val + "; expires=" + date.toUTCString() + "; path=" + path;
        }
    }




    // getCookie(key)    
    // function getCookie(key) {
    //     var cookie = document.cookie;
    //     var obj = {};
    //     if(cookie){
    //         var list = cookie.split("; ");
    //         for(var i = 0;i<list.length;i++){
    //             var item = list[i];  // 'user=a123123'
    //             var name = item.split("=")[0];
    //             var val = item.split("=")[1];
    //             obj[name] = val;
    //         }
    //     }
    //     return obj[key] || "";
    // }


    function getCookie(key) {
        var cookie = document.cookie;
        var obj = {};
        if(cookie){
            var list = cookie.split("; ");
            for(var i = 0;i<list.length;i++){
                var item = list[i];  // 'user=a123123'
                var name = item.split("=")[0];
                var val = item.split("=")[1];
                if(name == key){ // cookie解析的键名和取值键名一致
                    return val;
                }
            }
        }
        return "";
    }

</script>

</html>